{include file="header/index" /}
<div class="container whitebg agreement">
	<div class="toptitlenav">
		<h4>回收站</h4>
		<ul>
			<li class="pointer" id="_recycleall">全部</li>
			<li class="pointer" id="_unassignedrecycle">未指派</li>
			<li class="pointer" id="_assignedrecycle">已指派</li>
		</ul>
	</div>
	<!-- 工单类型 -->
	<ul class="nav nav-tabs" role="tablist">
		<li><i class="glyphicon glyphicon-menu-hamburger" style="margin-top: 13px;"></i></li>
		<li role="presentation" class="active" id="remclass">
			<a href="#whole" aria-controls="whole" onclick="getk(0)" role="tab" data-toggle="tab">全部</a>
			<span class="fr">|</span>
		</li>
		<!--将工单类型循环取出-->
		{foreach $type as $k => $v}
		<li role="presentation">
			<a href="#install" aria-controls="install" class="qieh{$k}" onclick="getk({$k})" role="tab" data-toggle="tab" data-status="{$k}">{$v}</a>
			<span class="fr">|</span>
		</li>
		{/foreach}

		<!--隐藏域，用来装工单类型id-->
		<input type="hidden" name="status" value="0" />

	</ul>

	<!--模糊搜索-->
	<form class="form-inline mt20 mb20" action="" method="post">
		<div class="form-group">
			<label>下单时间</label>
			<input class="form-control input-time" type="text" name="startTime" id="datetimeStart" readonly class="form_datetime">
			<input class="form-control input-time" type="text" name="endTime" id="datetimeEnd" readonly class="form_datetime">
		</div>
		<div class="form-group">
			<label>业务类型</label>
			<select id="type" class="form-control input-min">
				<option value="" selected="selected">请选择</option>
				{foreach $workType as $k=>$v}
				<option value="{$k}">{$v}</option>
				{/foreach}
			</select>
		</div>
		<div class="form-group mr20">
			<label>用户地址</label>
			<select class="form-control input-min" id="_province" onchange="showcity()">
				<option value="">--请选择省份--</option>
			</select>
			<select class="form-control input-min" id="_city" onchange="showareas()">
				<option value="">--请选择城市--</option>
			</select>
			<select class="form-control input-min" id="_area">
				<option value="">--请选择区/县--</option>
			</select>
		</div>
	</form>
	<form class="form-inline mt20 mb20" action="" method="post">
		<div class="form-group">
			<input type="text" class="form-control input-min" id="order_number" placeholder="请输入工单号">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="username" placeholder="请输入用户名">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="telphone" placeholder="请输入联系电话">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="engineers_name" placeholder="请输入工程人员">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="engineers_number" placeholder="请输入工程编号">
		</div>
		<div class="form-group mr20">
			<label>处理状态</label>
			<select id="workStatus" class="form-control input-min">
				<option value="" selected="selected">请选择处理状态</option>
				<option value="1">无效</option>
				<option value="2">前台未处理</option>
				<option value="3">前台已确认</option>
				<option value="5">工程部未指派工程人员</option>
				<option value="7">工程人员未接单</option>
				<option value="8">工程人员服务中</option>
				<option value="9">工程人员已完成</option>
				<option value="10">前台未回访</option>
				<option value="11">前台已回访，未完成</option>
				<option value="12">前台已回访，已完成</option>
				<option value="13">待完成</option>
			</select>
		</div>

		<button type="button" id="search" class="btn btn-default input-Btn">搜索</button>
	</form>

	<!-- Tab panes -->
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="whole">

			<table class="table table-bordered">
				<tr>
					<th><input type="checkbox" onclick="checkAll(this,'box')" id="all" /></th>
					<th>工单号</th>
					<th>户名</th>
					<th>联系电话</th>
					<th>业务类型</th>
					<th>所属运营中心</th>
					<th>所属区域</th>
					<th>金额</th>
					<th>换芯时间</th>
					<th>续费周期</th>
					<th>处理状态</th>
					<th>工程人员</th>
					<th>操作</th>
				</tr>

				<!--字符串拼接-->
				<tbody id="list">
				{volist name="data" id="k"}
				<tr>
					<td><input class="selectthis" type="checkbox" value="{$k.work_order_id}" name="box" onclick="selectAll('box','all')" /></td>
					<td>{$k.order_number}</td>
					<td>{$k.username}</td>
					<td>{$k.telphone}</td>
					<td>{$k.business_id}</td>
					<td>{$k.company_name}</td>
					<td>{$k.a_name}</td>
					<td>￥{$k.combo_money}元</td>
					<td>{$k.for_core_time}</td>
					<td>{$k.renew_date}</td>
					<td onclick="usrePopup({$k.work_order_id})">
						<span class="selecttxt cursor col-127" >{$k.work_order_status}</span>
					</td>
					<td>{$k.engineers_name}</td>
					<td>
						<a href="order_details.html">查看</a>
						<a href="#">修改</a>
					</td>
				</tr>
				{/volist}
				</tbody>

				<input type="hidden" value="" name="workOrderStatus" />
			</table>
			<div class="batchdelbtn" onclick="delmseeage('是否还原所有选中的信息')">批量还原</div>
			<div class="clearfix"></div>
		</div>

	</div>





	<!--分页显示-->
	<div class="clearfix" style="float:right;margin: 0 auto;">
		<span class="fl mt5">共<b id="total">{$count}</b>条数据，</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
	</div>
	<!-- 加载动画 -->
	<div class="spiner-example">
		<div class="sk-spinner sk-spinner-three-bounce">
			<div class="sk-bounce1"></div>
			<div class="sk-bounce2"></div>
			<div class="sk-bounce3"></div>
		</div>
	</div>

</div>
</body>
<script>

    //修改状态信息
    function usrePopup(id){
        var workorderstatus = $("input[name='workorderstatus']").val();
        // 发送ajax请求获取备注信息
        $.getJSON("{:url('/admin/workorder/getremarks')}",{work_order_id:id},function(data){
            // 获取工单类型配置信息，转换为对象
            var status_obj=<?php  echo json_encode($work_order_status); ?>;
            var status_arr = eval(status_obj);
            var str = "";
				str += "<option value=1>无效</option>";
				str += "<option value=2>前台未处理</option>";
				str += "<option value=3>前台已确认</option>";
				str += "<option value=5>工程部未指派工程人员</option>";
				str += "<option value=7>工程人员未接单</option>";
				str += "<option value=8>工程人员服务中</option>";
				str += "<option value=9>工程人员已完成</option>";
				str += "<option value=10>前台未回访</option>";
				str += "<option value=11>前台已回访，未完成</option>";
				str += "<option value=12>前台已回访，已完成</option>";

            var html ='<div class="stateWorkorder">';
            html +='<div>';
            html +='<p class="clearfix">';
            html +='<label class="fl">处理状态</label>';
            html +='<select id="_orderStatus'+id+'">';
            html +='<option value="">选择状态</option>';
            html +=str;
            html +='</select>';
            html +='</p>';
            html +='<p class="clearfix">';
            html +='<label  class="fl">备注</label>';
            html +='<textarea id="remarks'+id+'"></textarea>';
            html +='</p>';
            html +='<p class="state-Btn">';
            html +='<button onclick="savesuccess('+id+',5)" type="button" class="btn btn-primary">保存</button>';
            html +='<button onclick="layuihide()" type="button" class="btn btn-default">取消</button>	';
            html +='</p>';
            html +='<ul class="">';
            $.each(data,function(k,v){
                html +='<li class="clearfix">';
                html +='<span class="state-lis-left fl ellipsis">' + v.remarks + '</span>';
                html +='<span class="state-lis-left fr ">备注人：'+ v.username +'  时间：' + v.operating_time + '</span>';
                html +='</li>';
            });
            html +='</ul>';
            html +='</div>';
            html +='</div>';
            html +='<input name="workOrderStatus'+id+'" value="'+id+'" type="hidden">';
            top.layer.open({
                type: 1,
                title: '处理状态',
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 0, //不显示关闭按钮
                anim: 2,
                area: ['600px', '420px'], //宽高
                shadeClose: true, //开启遮罩关闭
                content:html,
            });
        });
    }


    // 计算json对象长度
    function getJsonLength(jsonData){
        var jsonLength = 0;
        for(var item in jsonData){
            jsonLength++;
        }
        return jsonLength;
    }

	// 全部的
	$("#_recycleall").click(function(){
        // 调用分页
        Ajaxpage(1,0);
	});
	// 未指派的
    $("#_unassignedrecycle").click(function(){
        // 调用分页
        Ajaxpage(1,3);
    });
	// 已指派的
	$("#_assignedrecycle").click(function(){
		// 调用分页
        Ajaxpage(1,4);
	});


    // 三级联动
    $(function() {
        // ajax 请求 获取省数据
        $.post("{:url('Three/province')}", {}, function(data) {
            $("#_province").html('');
            var str = '<option value="">--请选择省份--</option>';
            $.each(data, function(key, val) {
                str += '<option value="' + val.id + '" >' + val.area_name + '</option>';
            })
            $("#_province").html(str);
        }, 'json');

    });
    // 获取市数据
    function showcity() {
        // 获取选中省 对应的id
        var id = $("#_province option:selected").val();
        var str = '<option value="">--请选择城市--</option>';
        var str1 = '<option value="">--请选择区/县--</option>';
        $("#_city").html(str);
        $("#_area").html(str1);
        //发送ajax请求  获取省对应的市
        $.getJSON("{:url('Three/city')}", {
            parent_id: id
        }, function(data) {
            $("#_city").html('');
            var str = '<option value="">--请选择城市--</option>';
            $.each(data, function(k, v) {
                str += '<option value="' + v.id + '">' + v.area_name + '</option>';
            })
            $("#_city").html(str);
        });
    }
    // 获取 区/县数据
    function showareas() {
        // 获取选中市 对应的id
        var id = $("#_city option:selected").val();
        // 发送ajax请求 获取市对应的区县
        $.getJSON("{:url('Three/areas')}", {
            city_id: id
        }, function(data) {
            $("#_area").html('');
            var str = '<option value="">--请选择区/县--</option>';
            $.each(data, function(k, v) {
                str += '<option value="' + v.id + '">' + v.area_name + '</option>';
            });
            $("#_area").html(str);
        })
    }

    //   修改工单处理状态   1
    function showselectlist(obj) {

        if($(obj).next().hasClass('hide')) {
            $(obj).next().removeClass('hide').addClass('show');
        } else {
            $(obj).next().removeClass('show').addClass('hide');
        }
    }
    //   修改工单处理状态   2
    function selectstate(obj) {
        // 获取工单id
        var workId = $(obj).attr('work-id');
        // 获取状态对应的值
        var statusType = $(obj).attr('status-type');
        // 发送ajax请求;
        $.getJSON('status', {
            statusType: statusType,
            workId: workId
        }, function(data) {
            if(data.status == 0) {
                layer.msg('状态修改失败', {
                    time: 1000
                });
            } else {
                layer.msg('状态修改成功', {
                    time: 1000,
                    icon: 1
                });
            }
        });
        var txt = $(obj).text();
        $(obj).parents('.selectstate').find('.selecttxt').text(txt);
        $(obj).parents('.selectlist').removeClass('show').addClass('hide');
    }

    //复选框选中
    function checkAll(obj, name) {
        //alert(obj.checked);
        //获取name=box的复选框
        var userids = document.getElementsByName(name);
        //alert(userids.length);
        for(var i = 0; i < userids.length; i++) {
            userids[i].checked = obj.checked;
        }
    }

    function selectAll(name, id) {
        //获取name=box的复选框
        var userids = document.getElementsByName(name);
        var count = 0;
        //遍历所有的复选框
        for(var i = 0; i < userids.length; i++) {
            if(userids[i].checked) {
                count++;
            }
        }
        //选中复选框的个数==获取复选框的个数
        if(count == userids.length) {
            //设置id为all复选框选中
            document.getElementById(id).checked = true;
        } else {
            //设置id为all复选框不选中
            document.getElementById(id).checked = false;
        }
    }

    // 删除  (支持批量删)
    function del() {
        var str = [];
        $.each($('input:checkbox:checked'), function() {
            str.push($(this).val());
        });
        $.get("{:url('remove')}", {
            data: str,
			is_delete:0
        }, function(data) {
            Ajaxpage();
            if(data.status == 0) {
                layer.msg(data.message, {
                    icon: 2
                });
            } else {
                layer.msg(data.message, {
                    icon: 1
                });
            }
        })
    }
    // 批量删除 弹窗
    function delmseeage(txt, obj) {
        if($('.selectthis').is(':checked')) {
            layer.alert(txt, {
                btn: ['确认', '取消'] //按钮
            }, function() {
                // 调用del 方法，执行删除
                $('#all').prop('checked',false);
                del();
            });
        } else {
            layer.msg('您还未选中', {
                time: 1000,
                icon: 0
            });
        }
    }

    // 模糊搜索按钮点击事件
    $("#search").click(function() {
        // 获取工单类型隐藏域对应的值
        var workType = $("input[name='status']").val();

        // 清楚  全部按钮 的class样式
        $("#remclass>li").removeClass('active');
        // 给搜索的工单类型加入class
        $("#qie" + workType).parent('li').addClass('active');

        // 获取模糊搜索数据
        //            var startTime = $("#datetimeStart").val();
        //            var endTime = $("#datetimeEnd").val();
        //            var order_number = $("#order_number").val();
        //            var username = $("#username").val();
        //            var contract_no = $("#contract_no").val();
        //            var workStatus = $("#workStatus").val();
        //            var province = $("#_province").val();
        //            var city = $("#_city").val();
        //            var area = $("#_area").val();

        // 调用分页
        //            Ajaxpage(startTime,endTime,order_number,username,contract_no,workStatus,province,city,area);
        Ajaxpage();
    });

    // 工单类型切换
    function getk(id) {
        //清空checkbox
        $("input[type=checkbox]").prop("checked", false);
        // 清空搜索数据
        $("#datetimeStart").val('');
        $("#datetimeEnd").val('');
        $("#order_number").val('');
        $("#username").val('');
        $("#telphone").val('');
        $("#engineers_name").val('');
        $("#engineers_number").val('');
        $("#workStatus").val('');
        $("#type").val('');
        $("#_province").val('');
        $("#_city").val('');
        $("#_area").val('');

        // 将id存入隐藏域
        $("input[name='status']").val(id);

        // 调用分页
        Ajaxpage();
    }



    //laypage分页
    Ajaxpage();
    // curr 获取当前页面数
    function Ajaxpage(curr,workorderstatus) {
        // 获取模糊搜索数据
        var startTime = $("#datetimeStart").val();
        var endTime = $("#datetimeEnd").val();
        var order_number = $("#order_number").val();
        var username = $("#username").val();
        var telphone = $("#telphone").val();
        var engineers_name = $("#engineers_name").val();
        var engineers_number = $("#engineers_number").val();
        var workStatus = $("#workStatus").val();
        var type = $("#type").val();
        var province = $("#_province").val();
        var city = $("#_city").val();
        var area = $("#_area").val();

        var key = $('#key').val();
        // 获取隐藏域里面的类型对应数字
        var status = $('input[name="status"]').val();


        // 发送ajax请求
        $.getJSON('{:url("/admin/workorder/recycle")}', {
            page: curr || 1,
            key: key,
            status: status,
            startTime: startTime,
            endTime: endTime,
            order_number: order_number,
            username: username,
            telphone: telphone,
            engineers_name: engineers_name,
            engineers_number: engineers_number,
            workStatus: workStatus,
            type: type,
            province: province,
            city: city,
            area: area,
            workorderstatus: workorderstatus
        }, function(data) {
//								console.log(data);
            $(".spiner-example").css('display', 'none'); //数据加载完关闭动画
            if(data == '') {
                // 替换总的数据
                document.getElementById('total').innerText = 0;
                $("#list").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
            } else {
                // 替换总的数据
                document.getElementById('total').innerText = data[0].count;
                // 清空数据
                $("#list").html('');
                // 将数据循环，拼接
                var str = '';
                $.each(data, function(key, val) {
                    var engineers_name = val.engineers_name==null ? '未指派' : val.engineers_name;
                    str += '<tr>';
                    str += '<td><input class="selectthis" type="checkbox" value=' + val.work_order_id + ' name="box" onclick="selectAll(' + "'box'" + ',' + "'all'" + ')"/></td>';
                    str += '<td>' + val.order_number + '</td>';
                    str += '<td>' + val.username + '</td>';
                    str += '<td>' + val.telphone + '</td>';
                    str += '<td>' + val.business_id + '</td>';
                    str += '<td>' + val.company_name + '</td>';
                    str += '<td>' + val.a_name + '</td>';
                    str += '<td>'+"￥" + val.combo_money + "元" + '</td>';
                    str += '<td>' + val.for_core_time + '</td>';
                    str += '<td>' + val.renew_date + '</td>';
                    str += '<td onclick="usrePopup(' + val.work_order_id + ')">';
                    str += '<span class="selecttxt cursor col-127">' + val.work_order_status + '</span>';
                    str += '<td>' + engineers_name + '</td>';
                    str += '<td>';
                    str += '<a href="detail/id/' + val.work_order_id + '">查看</a>&nbsp;';
                    str += '<a href="/admin/workorder/edit/wid/'+val.work_order_id+'/uid/'+val.user_id+'/cid/'+val.contract_id+'/who/'+val.who+'">修改</a>';
                    str += '</td>';
                    str += '</tr>';
                });
                // 将拼接的数据输出在页面
                $("#list").html(str);

                laypage({
                    cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
                    pages: data[0].allPage, //总页数
                    skip: true, //是否开启跳页
                    skin: '#337ab7', //分页组件颜色
                    curr: curr || 1,
                    first: '首页', //若不显示，设置false即可
                    last: '尾页', //若不显示，设置false即可
                    groups: 3, //连续显示分页数
                    jump: function(obj, first) {
                        if(!first) {
                            Ajaxpage(obj.curr)
                        }
                        $('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
						inputlength();
                    }
                });
            }
        });
    }
</script>

</html>

<script type="text/javascript">
    //头部选项卡
    $('#myTabs a').click(function(e) {
        e.preventDefault()
        $(this).tab('show')
    })

    //日期选择
    $("#datetimeStart").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
    });
    $("#datetimeEnd").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
    });



</script>